<template>
  <div class="list">
    <list-search
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    />
    <list-content
      ref="contentRef"
      @new-click="handleNewClick"
      @edit-click="handleEditClick"
    />
    <list-modal ref="modalRef" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ListSearch from './c-cpns/list-search.vue'
import ListContent from './c-cpns/list-content.vue'
import ListModal from './c-cpns/list-modal.vue'
const router = useRouter()
const contentRef = ref<InstanceType<typeof ListContent>>()
function handleQueryClick(formData: any) {
  contentRef.value?.fetchEventListData(formData)
}
function handleResetClick() {
  contentRef.value?.fetchEventListData()
}

// 对modal组件的操作
const modalRef = ref<InstanceType<typeof ListModal>>()
function handleNewClick() {
  modalRef.value?.setModalVisible()
}
function handleEditClick(itemData: any) {
  modalRef.value?.setModalVisible(false, itemData)
}
</script>

<style scoped lang="less">
.list {
  border-radius: 8px;
  overflow: hidden;
}
</style>
